<template>
  <div class="combo-cotainer">
    <!-- 已选服务 -->
    <div class="combo-choosed-services" v-show="flag7">
      <div class="combo-choosed-service" v-for="item in currentChoosedServices" :key="item">
        <span class="choosed-service-name">{{item}}</span>
        <span>✖</span>
      </div>
    </div>
    <!-- 下拉菜单组件 -->
    <div class="combo">
      <div class="combo-items">
        <div class="combo-item" @click="showMoreCity">
          <div class="combo-item-title">
            <span v-show="flag3">{{this.currentCity}}</span>
            <span v-show="flag4" :class="{activecolor:local=='全城'?false:true}">{{this.local}}</span>
          </div>
          <span class="mui-icon mui-icon-arrowdown"></span>
        </div>
        <div class="combo-item" @click="showMoreService" v-show="true">
          <div class="combo-item-title">
            <span v-show="flag5">全部</span>
            <span v-show="flag6" :class="{activecolor:services=='全部'?false:true}">{{this.services}}</span>
          </div>
          <span class="mui-icon mui-icon-arrowdown"></span>
        </div>
        <div class="combo-item" @click="showMoreChoose">
          <div class="combo-item-title">
            <span :class="{activecolor:value=='距离优先'?false:true}">{{value}}</span>
          </div>
          <span class="mui-icon mui-icon-arrowdown"></span>
        </div>
      </div>

      <transition
        @beforeEnter="beforeEnter"
        @enter="enter"
        @afterEnter="afterEnter"
        @beforeLeave="beforeLeave"
        @leave="leave"
        @afterLeave="afterLeave"
      >
        <div class="combo-showmore" v-show="flag" ref="comboinfo">
          <div class="combo-showmore-header">
            <div>
              <span class="title">当前:</span>
              <span class="title">{{this.currentCity}}</span>
            </div>
            <router-link to="/store/location">
              <span @click="clearCurrentCity">切换城市</span>
            </router-link>
          </div>
          <div class="combo-showmore-content">
            <div
              class="combo-showmore-content-button"
              @click="handleCityClick(key)"
              v-for="(item,key) in district"
              :key="key"
            >
              <button type="button" :class="{active:local === key ? true : false}">{{key}}</button>
            </div>

            <!-- <button type="button">昌平区</button>
        <button type="button">昌平区</button>
        <button type="button">昌平区</button>
            <button type="button">燕郊开发区</button>-->
          </div>
        </div>
      </transition>
      <transition
        @beforeEnter="beforeEnter"
        @enter="enter"
        @afterEnter="afterEnter"
        @beforeLeave="beforeLeave"
        @leave="leave"
        @afterLeave="afterLeave"
      >
        <div class="combo-showmore" v-show="flag1" ref="comboinfo">
          <div class="combo-showmore-content">
            <div
              class="combo-showmore-content-button"
              v-for="(item,key) in service"
              :key="key"
              @click="handleServiceClick(key)"
            >
              <button type="button" :class="{active:services === key ? true : false}">{{key}}</button>
            </div>
          </div>
        </div>
      </transition>
      <transition
        @beforeEnter="beforeEnter"
        @enter="enter"
        @afterEnter="afterEnter"
        @beforeLeave="beforeLeave"
        @leave="leave"
        @afterLeave="afterLeave"
      >
        <div class="combo-showmore" v-show="flag2" ref="comboinfo">
          <div class="combo-showmore-choose" @click="handleChooseClick">
            <mt-radio align="right" v-model="value" :options="options"></mt-radio>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
import "../../lib/mui/css/mui.min.css";
//导入vuex
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      flag: false,
      flag1: false,
      flag2: false,
      flag3: true,
      flag4: false,
      flag5: true,
      flag6: false,
      flag7: true,
      value: "距离优先",
      options: [
        {
          label: "距离优先",
          value: "距离优先"
        },
        {
          label: "好评最多",
          value: "好评最多"
        },
        {
          label: "销量最多",
          value: "销量最多"
        }
      ],
      local: "全城",
      services: "全部",
      district: [],
      service: []
    };
  },
  activated() {
    this.getDistrict();
    this.getService();
  },
  mounted() {},
  computed: {
    ...mapState({
      currentCity: "city"
    }),
    ...mapState({
      currentChoosedServices: "choosedServicesName"
    })
  },
  methods: {
    showMoreCity() {
      if (this.flag1) {
        this.flag1 = !this.flag1;
      } else if (this.flag2) {
        this.flag2 = !this.flag2;
      }
      this.flag = !this.flag;
    },
    showMoreService() {
      if (this.flag) {
        this.flag = !this.flag;
      } else if (this.flag2) {
        this.flag2 = !this.flag2;
      }
      this.flag1 = !this.flag1;
    },
    showMoreChoose() {
      if (this.flag1) {
        this.flag1 = !this.flag1;
      } else if (this.flag) {
        this.flag = !this.flag;
      }
      this.flag2 = !this.flag2;
    },
    beforeEnter(el) {
      el.style.top = "-600px";
      el.style.transform = "translate(0,0)";
    },
    enter(el, done) {
      el.offsetWidth;
      el.style.top = "45px";
      el.style.transition = "all 0.5s ease";

      //done();
    },
    afterEnter(el) {
      //this.flag = this.flag;
    },
    beforeLeave(el) {
      el.style.top = "45px";
      el.style.transform = "translate(0,0)";
    },
    leave(el, done) {
      el.offsetWidth;
      el.style.top = "-600px";
      el.style.transition = "all 1.5s ease";
      //done();
    },
    afterLeave() {
      //this.flag = this.flag;
    },
    handleCityClick(city) {
      this.flag = false;
      this.flag3 = false;
      this.flag4 = true;
      this.local = city;
      this.$emit("change", this.local);
    },
    handleServiceClick(service) {
      this.flag1 = false;
      this.flag5 = false;
      this.flag6 = true;
      this.services = service;
      this.$emit("getservice", this.services);
    },
    handleChooseClick() {
      this.flag2 = false;
    },
    getDistrict() {
      this.$http.get("/city.php").then(result => {
        //console.log(result);
        if (result.body.status === 0) {
          var key = this.currentCity;
          //console.log(key);
          this.district = result.body.district[key];
          //console.log(this.district);
        }
      });
    },
    getService() {
      this.$http.get("/city.php").then(result => {
        if (result.body.status === 0) {
          this.service = result.body.service;
          //console.log(this.service);
        }
      });
    },
    clearCurrentCity() {
      //this.$store.commit("clearCurrentCity");
    }
  },
  watch: {
    "$route.path": function(newVal) {
      if (newVal !== "/store") {
        this.flag = this.flag1 = this.flag2 = false;
        this.flag3 = true;
        this.flag4 = false;
        this.flag5 = true;
        this.flag6 = false;
        this.local = "全城";
        this.services = "全部";
        this.$emit("change", "全城");
        this.$emit("getservice", "全部");
      }
    },
    currentCity() {
      if (this.currentCity) {
        this.flag3 = true;
        this.flag4 = false;
        this.flag5 = true;
        this.flag6 = false;
        this.$emit("change", "全城");
        this.$emit("getservice", "全部");
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.combo-cotainer {
  .combo-choosed-services {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 16px;
    height: 33px;
    background-color: rgb(248, 236, 236);
    // opacity: 0.06;
    //background-color: rgba(#f79b4f, 0.06);
    z-index: 3;
    .combo-choosed-service {
      width: 79px;
      height: 23px;
      line-height: 23px;
      border: 0.5px solid #e77110;
      border-radius: 12.5px;
      text-align: center;
      margin-right: 14px;
      span {
        //display: block;
        color: #f79b4f;
        font-size: 11px;
      }
      .choosed-service-name {
        margin-right: 8px;
      }
    }
  }
  .combo {
    // display: flex;
    // justify-content: space-around;
    align-items: center;
    height: 45px;
    background-color: #fff;
    position: relative;
    //z-index: 1;
    //overflow: hidden;
    margin-bottom: 16px;
    .combo-showmore {
      background-color: #fff;
      border-top: 1px solid #ccc;
      padding: 20px 20px 10px 20px;
      position: absolute;
      //display:flex;
      width: 100%;
      //top: 45px;
      //transform: translateY(-123px);
      z-index: 1 !important;
      .combo-showmore-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;
        span {
          font-size: 14px;
        }
        .title {
          font-weight: bold;
        }
      }
      .combo-showmore-content {
        display: flex;
        flex-wrap: wrap;
        .combo-showmore-content-button {
          width: 33.3%;
          text-align: center;
          margin-bottom: 10px;
          button {
            width: 90%;
            height: 40px;
            color: #333333;
          }
          .active {
            border-color: #a1171b;
          }
        }
      }
      .combo-showmore-choose {
        .mui-table-view-cell {
          .mui-navigate-right {
            font-size: 14px;
          }
        }
      }
    }
    .combo-items {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 45px;
      background-color: #fff;
      position: relative;
      z-index: 2;
      //overflow: hidden;
      //margin-bottom: 16px;
      .combo-item {
        display: flex;
        align-items: center;
        margin: 0 24px;
        .combo-item-title {
          width: 56px;
          font-size: 14px;
          line-height: 14px;
          text-align: center;
        }
        .activecolor {
          color: #a1171b;
        }
        .mui-icon-arrowdown {
          font-size: 7px;
        }
      }
      .mui-icon {
        margin-left: 4px;
      }
    }
  }
}
</style>